<template>
  <div>
    <h3>房型列表</h3>
    <input
      type="button"
      value="批量删除"
      class="btn btn-primary"
      @click="delAll"
    />
    <input
      type="button"
      value="批量发布"
      class="btn btn-primary"
      @click="UpdateAllState(1)"
    />
    <input
      type="button"
      value="批量不发布"
      class="btn btn-primary"
      @click="UpdateAllState(0)"
    />
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>
            <input type="checkbox" v-model="checked" @change="checkAll" />
          </td>
          <td>序号</td>
          <td>房型名称</td>
          <td>房型图片</td>
          <td>房型状态</td>
          <td>操作</td>
        </tr>
        <tr v-for="item in data.list">
          <td>
            <input type="checkbox" v-model="ids" :value="item.id" />
          </td>
          <td>{{ item.id }}</td>
          <td>{{ item.houseTypeName }}</td>
          <td><img :src="item.photo" width="100" height="100" /></td>
          <td>{{ item.state == 1 ? '发布' : '不发布' }}</td>
          <td>
            <input type="button" value="修改" class="btn btn-primary" />
            <input type="button" value="删除" class="btn btn-danger" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();

let info: any = reactive({
  pageIndex: 1,
  pageSize: 2,
  houseTpyeName: '',
  area1: '',
  area2: '',
});

let data: any = reactive({
  list: [],
  totalCount: 0,
  totalPage: 0,
});

//全选全不选变量
let checked = ref(false);
let ids = ref([]);

onMounted(() => {
  getHouseTypeList();
});

//修改状态
const UpdateAllState = (state) => {
  //1.友好提示(必选一项  要不要修改) 2.发送请求  3.刷新列表
  if (ids.value.length == 0) {
    alert('必选一项');
    return;
  }
  let f = confirm('请问确定要修改？');
  if (f) {
    axios({
      url: '/api/HouseTypes/UpdateAll',
      method: 'put',
      params: {
        ids: ids.value.toString(),
        state: state,
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data > 0) {
          alert('修改成功');
          checked.value = false;
          ids.value = [];
          getHouseTypeList();
        } else {
          alert('修改失败');
          checked.value = false;
          ids.value = [];
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
};

//批量删除
const delAll = () => {
  //1.友好提示(必选一项  要不要删) 2.发送请求  3.刷新列表
  if (ids.value.length == 0) {
    alert('必选一项');
    return;
  }
  let f = confirm('请问确定要删除？');
  if (f) {
    axios({
      url: '/api/HouseTypes/DelAll',
      method: 'put',
      params: {
        ids: ids.value.toString(),
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data > 0) {
          alert('删除成功');
          checked.value = false;
          getHouseTypeList();
        } else {
          alert('删除失败');
          checked.value = false;
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
};

//全选与全不选   ===> 目的：获取多个id  放到那个变量存储？ids
const checkAll = () => {
  console.log(checked.value);
  if (checked.value) {
    ids.value = data.list.map((item) => {
      return item.id;
    });
  } else {
    ids.value = [];
  }

  console.log('ids:', ids.value);
};

const getHouseTypeList = () => {
  axios({
    url: '/api/HouseTypes/GetHouseTypeList',
    method: 'get',
    params: info,
  })
    .then((res) => {
      console.log(res);
      Object.assign(data, res.data);
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
